<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>窗口自适应</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            body{
                display: flex;
                flex-direction: column;
            }
            header{
                height: 100px;
                background: red;
            }
            main{
                background: peru;
                flex-grow: 1;
                display: flex;
                justify-content: center;
            }
            footer{
                height: 100px;
                background: palegreen;
            }
            main section:nth-of-type(1){
                width: 200px;
                background: lightgoldenrodyellow;
            }
            main section:nth-of-type(2){
                flex-grow: 1;
                background: #1abfe8;
            }
            main section:nth-of-type(3){
                width:200px;
                background: #e8e815;
            }
        </style>
    </head>
    <body>
        <header>header</header>
        <main>
            <section>main-1</section>
            <section>main-2</section>
            <section>main-3</section>
        </main>
        <footer>footer</footer>
    </body>
</html>